Master CSS 深色模式（Dark Mode）

2023 iThome 鐵人賽

DAY 24

Modern Web

下一代 CSS 解決方案：Master CSS 具增強語法的虛擬 CSS 語言系列第 24 篇

15th鐵人賽

miru129

團隊啾嚕咕嚕跳起來

2023-10-09 14:28:56

2484 瀏覽

分享至

近年來，深色模式（Dark Mode）已成為網頁設計中的一大趨勢。從各大網站的網頁設計到作業系統內的流行的應用程式，深色模式無疑已成為使用者期望的一部分，本文將簡單介紹深色模式到底功用為何，以及我們如何在網頁中使用 Master CSS 實現它。

深色模式的功用

深色模式之所以如此受到歡迎，除了酷炫新潮外，還具備以下特點：

美觀與現代感：深色模式為網站和應用程式帶來了新潮、現代的外觀，使其擁有更好的 UI 與吸引力。
減少眼睛疲勞：在低光環境中，如夜晚中關上燈的房間，深色模式的背景可以降低螢幕的亮度和對比，有助於降低強白光的直射刺眼程度，同時也能減少眼睛的疲勞。
增加可讀性：對於某些使用者而言，深色背景上的亮色文字更易於閱讀也更喜歡深色模式的呈現方式。
節省電能：在 OLED 的螢幕上，當像素是黑色時，像素上的有機發光二極體可能不會被點亮，當然實際上可能會依據不同面板可能有所不同，但相較於純白色或亮色，深色模式還是可以幫助節省電池與二極體的壽命。

Master CSS 深色模式的設定方式

設定深色模式並不像聽起來那麼困難，透過 JavaScript 和 CSS 的選擇器，我們可以輕鬆的為網站加入深色模式的選項，而在 Master CSS 中你也可以透過媒體查詢的選擇器來實現亮色與深色模式的樣式標記。

你可以使用這下列這兩種標記來指定樣式標記在特定的模式下生效：

@light: 🌞 使用後代組合選擇器在 light 亮色模式下套用樣式

@dark: 🌙 使用後代組合選擇器在 dark 深色模式下套用樣式

在使用亮色或深色模式時，你需要在套用樣式的外層的父元素，來建立 light 或 dark 的類別標記， @light 與 @dark 標記才能正確套用樣式，因為這兩個標記都是使用，後代組合選擇器（Descendant Combinator）來套用樣式。

<!-- 🌞 亮色模式（light） -->
<html class="light">
  <body>
    <!-- ... -->
  </body>
</html>

<!-- 🌙 深色模式（dark） -->
<html class="dark">
  <body>
    <!-- ... -->
  </body>
</html>

接著就可以使用下列程式碼，標記亮色與深色樣式，當 html 的類別在 light 與 dart 做切換時，就會有變換模式套用不同樣式的效果。

<div class="fg:gold-76@light fg:gray-80@dark">Master CSS</div>

隨著切換父層 <html> 標籤的 class 屬性，class="light" 表示亮色模式；class="dark" 表示深色模式，效果如下，亮色模式套用金黃色的文字顏色；深色模式套用亮灰色的文字顏色。

產生的 CSS：

.light .fg\:gold-76\@light {
  color: rgb(239, 192, 76);
}

.dark .fg\:gray-80\@dark {
  color: rgb(218, 217, 219);
}

Vue + VueUse + Master CSS 深色模式！啟動！

我們可以使用前端框架 Vue.js 結合 VueUse 套件，來快速的修改標籤內的 class 值，讓 Master CSS 可以應用 light 亮色模式與 dark 深色模式的標記來套用樣式。

在 Vue 的 SFC 內，就可以建立下列程式碼，點擊按鈕後就能觸發切換亮色與深色模式。

<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark({
    selector: 'html',
    attribute: 'color-scheme',
    valueDark: 'dark',
    valueLight: 'light',
})
const toggleDark = useToggle(isDark)
</script>

<template>
  <div class="bg:slate-97 bg:gray-15@dark rel flex flex:wrap center-content contain:content flex:1|1|auto r:5 b:1|solid|rgba(97,106,132,0.1) bg:center background-size:36|36 mt:10+.code w:760px py:40">
    <div class="flex flex:row align-items:center">
      <div
        class="w:36 h:36 flex justify-content:center align-items:center cursor:pointer b:1|solid|gray-80/.2@dark b:1|solid|gray-20/.2@light bg:gray-80/.05:hover@dark bg:gray-20/.05:hover@light rounded"
        @click="toggleDark()"
      >
        {{ (isDark) ? '🌙' : '🌞' }}
      </div>
      <p class="mx:8">
        目前主題是 <span class="font:semibold">{{ (isDark) ? '深色模式' : '亮色模式' }}</span>
      </p>
    </div>
  </div>
</template>

實際效果如下